1 tháng 9, 2025Tiếng Việt

Tìm hiểu về sự kiện nổi bọt trong React Portal, lan truyền sự kiện xuyên cây DOM, và cách quản lý sự kiện hiệu quả trong các ứng dụng React phức tạp. Học qua các ví dụ thực tế cho lập trình viên toàn cầu.

Sự kiện nổi bọt trong React Portal: Giải mã việc lan truyền sự kiện xuyên cây DOM

React Portals cung cấp một cách mạnh mẽ để render các thành phần bên ngoài hệ thống phân cấp DOM của thành phần cha. Điều này cực kỳ hữu ích cho các modals, tooltips, và các yếu tố giao diện người dùng khác cần thoát ra khỏi vùng chứa của cha chúng. Tuy nhiên, điều này lại tạo ra một thách thức thú vị: các sự kiện sẽ lan truyền như thế nào khi thành phần được render tồn tại ở một phần khác của cây DOM? Bài viết này sẽ đi sâu vào sự kiện nổi bọt trong React Portal, sự lan truyền sự kiện xuyên cây DOM, và cách xử lý sự kiện hiệu quả trong các ứng dụng React của bạn.

Tìm hiểu về React Portals

Trước khi đi sâu vào sự kiện nổi bọt, hãy cùng tóm tắt lại về React Portals. Một portal cho phép bạn render các thành phần con vào một nút DOM tồn tại bên ngoài hệ thống phân cấp DOM của thành phần cha. Điều này đặc biệt hữu ích cho các kịch bản mà bạn cần định vị một thành phần bên ngoài khu vực nội dung chính, chẳng hạn như một modal cần phủ lên mọi thứ khác, hoặc một tooltip nên được render gần một yếu tố ngay cả khi nó được lồng sâu.

Đây là một ví dụ đơn giản về cách tạo một portal:

            import React from 'react';
import ReactDOM from 'react-dom/client';

function Modal({ children, isOpen, onClose }) {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    
      
        {children}
        
      
    ,
    document.getElementById('modal-root') // Render the modal into this element
  );
}

function App() {
  const [isModalOpen, setIsModalOpen] = React.useState(false);

  return (
    
      My App
      
       setIsModalOpen(false)}>
        Modal Content
        This is the modal's content.
      
    
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

Trong ví dụ này, thành phần `Modal` render nội dung của nó bên trong một phần tử DOM có ID là `modal-root`. Phần tử `modal-root` này (mà bạn thường đặt ở cuối thẻ `<body>`) độc lập với phần còn lại của cây thành phần React của bạn. Sự tách biệt này là chìa khóa để hiểu về sự kiện nổi bọt.

Thách thức của việc lan truyền sự kiện xuyên cây DOM

Vấn đề cốt lõi mà chúng ta đang giải quyết là: Khi một sự kiện xảy ra trong một Portal (ví dụ: một cú nhấp chuột bên trong modal), sự kiện đó lan truyền lên cây DOM đến các trình xử lý cuối cùng của nó như thế nào? Điều này được gọi là sự kiện nổi bọt (event bubbling). Trong một ứng dụng React tiêu chuẩn, các sự kiện nổi bọt lên qua hệ thống phân cấp thành phần. Tuy nhiên, vì một Portal render vào một phần khác của DOM, hành vi nổi bọt thông thường sẽ thay đổi.

Hãy xem xét kịch bản này: Bạn có một nút bấm bên trong modal của mình, và bạn muốn một cú nhấp vào nút đó sẽ kích hoạt một hàm được định nghĩa trong thành phần `App` của bạn (thành phần cha). Làm thế nào để bạn đạt được điều này? Nếu không hiểu đúng về sự kiện nổi bọt, điều này có vẻ phức tạp.

Cách hoạt động của sự kiện nổi bọt trong Portals

React xử lý sự kiện nổi bọt trong Portals theo một cách cố gắng mô phỏng hành vi của các sự kiện trong một ứng dụng React tiêu chuẩn. Sự kiện *thực sự* nổi bọt lên, nhưng nó làm như vậy theo một cách tôn trọng cây thành phần React, chứ không phải cây DOM vật lý. Đây là cách nó hoạt động:

Event Capture (Bắt sự kiện): Khi một sự kiện (như nhấp chuột) xảy ra trong phần tử DOM của Portal, React sẽ bắt sự kiện đó.
Virtual DOM Bubble (Nổi bọt trên DOM ảo): React sau đó mô phỏng sự kiện nổi bọt thông qua *cây thành phần React*. Điều này có nghĩa là nó kiểm tra các trình xử lý sự kiện trong thành phần Portal và sau đó “nổi bọt” sự kiện lên các thành phần cha trong ứng dụng React *của bạn*.
Handler Invocation (Gọi trình xử lý): Các trình xử lý sự kiện được định nghĩa trong các thành phần cha sau đó sẽ được gọi, như thể sự kiện đó bắt nguồn trực tiếp từ trong cây thành phần.

Hành vi này được thiết kế để cung cấp một trải nghiệm nhất quán. Bạn có thể định nghĩa các trình xử lý sự kiện trong thành phần cha, và chúng sẽ phản hồi lại các sự kiện được kích hoạt trong Portal, *miễn là* bạn đã kết nối việc xử lý sự kiện một cách chính xác.

Ví dụ thực tế và hướng dẫn qua mã nguồn

Hãy minh họa điều này bằng một ví dụ chi tiết hơn. Chúng ta sẽ xây dựng một modal đơn giản có một nút bấm và trình bày cách xử lý sự kiện từ bên trong portal.

            import React from 'react';
import ReactDOM from 'react-dom/client';

function Modal({ children, isOpen, onClose, onButtonClick }) {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    
      
        {children}
        
        
      
    ,
    document.getElementById('modal-root')
  );
}

function App() {
  const [isModalOpen, setIsModalOpen] = React.useState(false);

  const handleButtonClick = () => {
    console.log('Button clicked from inside the modal, handled by App!');
    // You can perform actions here based on the button click.
  };

  return (
    
      React Portal Event Bubbling Example
      
       setIsModalOpen(false)}
        onButtonClick={handleButtonClick}
      >
        Modal Content
        This is the modal's content.
      
    
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

Giải thích:

Thành phần Modal: Thành phần `Modal` sử dụng `ReactDOM.createPortal` để render nội dung của nó vào `modal-root`.
Trình xử lý sự kiện (onButtonClick): Chúng ta truyền hàm `handleButtonClick` từ thành phần `App` đến thành phần `Modal` như một prop (`onButtonClick`).
Nút trong Modal: Thành phần `Modal` render một nút bấm gọi prop `onButtonClick` khi được nhấp vào.
Thành phần App: Thành phần `App` định nghĩa hàm `handleButtonClick` và truyền nó như một prop cho thành phần `Modal`. Khi nút bên trong modal được nhấp, hàm `handleButtonClick` trong thành phần `App` sẽ được thực thi. Câu lệnh `console.log` sẽ chứng minh điều này.

Điều này cho thấy rõ ràng sự kiện nổi bọt xuyên qua portal. Sự kiện nhấp chuột bắt nguồn từ bên trong modal (trong cây DOM), nhưng React đảm bảo rằng sự kiện được xử lý trong thành phần `App` (trong cây thành phần React) dựa trên cách bạn đã kết nối các props và trình xử lý của mình.

Những cân nhắc nâng cao và các phương pháp hay nhất

1. Kiểm soát lan truyền sự kiện: stopPropagation() và preventDefault()

Giống như trong các thành phần React thông thường, bạn có thể sử dụng `stopPropagation()` và `preventDefault()` trong các trình xử lý sự kiện của Portal để kiểm soát việc lan truyền sự kiện.

stopPropagation(): Phương thức này ngăn sự kiện nổi bọt lên các thành phần cha xa hơn. Nếu bạn gọi `stopPropagation()` bên trong trình xử lý `onButtonClick` của thành phần `Modal`, sự kiện sẽ không đến được trình xử lý `handleButtonClick` của thành phần `App`.
preventDefault(): Phương thức này ngăn chặn hành vi mặc định của trình duyệt liên quan đến sự kiện (ví dụ: ngăn chặn việc gửi một biểu mẫu).

Đây là một ví dụ về `stopPropagation()`:

            function Modal({ children, isOpen, onClose, onButtonClick }) {
  if (!isOpen) return null;

  const handleButtonClick = (event) => {
    event.stopPropagation(); // Prevent the event from bubbling up
    onButtonClick();
  };

  return ReactDOM.createPortal(
    
      
        {children}
        
        
      
    ,
    document.getElementById('modal-root')
  );
}

Với thay đổi này, việc nhấp vào nút sẽ chỉ thực thi hàm `handleButtonClick` được định nghĩa trong thành phần `Modal` và *sẽ không* kích hoạt hàm `handleButtonClick` được định nghĩa trong thành phần `App`.

2. Tránh chỉ dựa vào sự kiện nổi bọt

Mặc dù sự kiện nổi bọt hoạt động hiệu quả, hãy xem xét các mẫu thay thế, đặc biệt là trong các ứng dụng phức tạp. Việc phụ thuộc quá nhiều vào sự kiện nổi bọt có thể làm cho mã của bạn khó hiểu và khó gỡ lỗi hơn. Hãy xem xét các lựa chọn thay thế sau:

Truyền Prop trực tiếp: Như chúng ta đã thấy trong các ví dụ, việc truyền các hàm xử lý sự kiện dưới dạng props từ cha sang con thường là cách tiếp cận sạch sẽ và rõ ràng nhất.
Context API: Đối với nhu cầu giao tiếp phức tạp hơn giữa các thành phần, React Context API có thể cung cấp một cách tập trung để quản lý trạng thái và các trình xử lý sự kiện. Điều này đặc biệt hữu ích cho các kịch bản mà bạn cần chia sẻ dữ liệu hoặc hàm trên một phần đáng kể của cây ứng dụng, ngay cả khi chúng bị tách biệt bởi một portal.
Sự kiện tùy chỉnh: Bạn có thể tạo các sự kiện tùy chỉnh của riêng mình mà các thành phần có thể gửi đi và lắng nghe. Mặc dù khả thi về mặt kỹ thuật, nhưng nói chung tốt nhất là nên bám vào các cơ chế xử lý sự kiện tích hợp của React trừ khi thực sự cần thiết, vì chúng tích hợp tốt với DOM ảo và vòng đời thành phần của React.

3. Cân nhắc về hiệu suất

Bản thân sự kiện nổi bọt có tác động hiệu suất tối thiểu. Tuy nhiên, nếu bạn có các thành phần lồng nhau rất sâu và nhiều trình xử lý sự kiện, chi phí lan truyền sự kiện có thể tăng lên. Hãy phân tích ứng dụng của bạn để xác định và giải quyết các điểm nghẽn về hiệu suất. Giảm thiểu các trình xử lý sự kiện không cần thiết và tối ưu hóa việc render thành phần của bạn ở những nơi có thể, bất kể bạn có đang sử dụng Portals hay không.

4. Kiểm thử Portals và sự kiện nổi bọt

Kiểm thử sự kiện nổi bọt trong Portals đòi hỏi một cách tiếp cận hơi khác so với việc kiểm thử tương tác thành phần thông thường. Sử dụng các thư viện kiểm thử thích hợp (như Jest và React Testing Library) để xác minh rằng các trình xử lý sự kiện được kích hoạt chính xác và `stopPropagation()` cũng như `preventDefault()` hoạt động như mong đợi. Đảm bảo các bài kiểm thử của bạn bao gồm các kịch bản có và không có kiểm soát lan truyền sự kiện.

Đây là một ví dụ khái niệm về cách bạn có thể kiểm thử ví dụ về sự kiện nổi bọt:

            import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import App from './App';

// Mock ReactDOM.createPortal to prevent it from rendering a real portal
jest.mock('react-dom/client', () => ({
  ...jest.requireActual('react-dom/client'),
  createPortal: (element) => element, // Return the element directly
}));

test('Modal button click triggers parent handler', () => {
  render();
  const openModalButton = screen.getByText('Open Modal');
  fireEvent.click(openModalButton);
  const modalButtonClick = screen.getByText('Click Me in Modal');
  fireEvent.click(modalButtonClick);
  // Assert that the console.log from handleButtonClick was called.
  // You'll need to adjust this based on how you assert your logs in your test environment
  // (e.g., mock console.log or use a library like jest-console)
  // expect(console.log).toHaveBeenCalledWith('Button clicked from inside the modal, handled by App!');
});

Hãy nhớ mock hàm `ReactDOM.createPortal`. Điều này quan trọng vì bạn thường không muốn các bài kiểm thử của mình thực sự render các thành phần vào một nút DOM riêng biệt. Điều này cho phép bạn kiểm thử hành vi của các thành phần một cách riêng lẻ, giúp dễ hiểu hơn về cách chúng tương tác với nhau.

Cân nhắc toàn cầu và khả năng truy cập

Sự kiện nổi bọt và React Portals là những khái niệm phổ quát áp dụng cho các nền văn hóa và quốc gia khác nhau. Tuy nhiên, hãy ghi nhớ những điểm sau để xây dựng các ứng dụng web thực sự toàn cầu và có thể truy cập:

Khả năng truy cập (WCAG): Đảm bảo các modals và các thành phần dựa trên portal khác của bạn có thể truy cập được bởi người dùng khuyết tật. Điều này bao gồm việc sử dụng các thuộc tính ARIA thích hợp (ví dụ: `aria-modal`, `aria-labelledby`), quản lý tiêu điểm một cách chính xác (đặc biệt là khi mở và đóng modals), và cung cấp các dấu hiệu trực quan rõ ràng. Việc kiểm thử triển khai của bạn với trình đọc màn hình là rất quan trọng.
Quốc tế hóa (i18n) và Bản địa hóa (l10n): Ứng dụng của bạn phải có khả năng hỗ trợ nhiều ngôn ngữ và cài đặt khu vực. Khi làm việc với modals và các yếu tố giao diện người dùng khác, hãy đảm bảo rằng văn bản được dịch đúng và bố cục thích ứng với các hướng văn bản khác nhau (ví dụ: các ngôn ngữ từ phải sang trái như tiếng Ả Rập hoặc tiếng Do Thái). Hãy xem xét sử dụng các thư viện như `i18next` hoặc Context API tích hợp của React để quản lý việc bản địa hóa.
Hiệu suất trong các điều kiện mạng đa dạng: Tối ưu hóa ứng dụng của bạn cho người dùng ở các khu vực có kết nối internet chậm hơn. Giảm thiểu kích thước của các gói bundle, sử dụng phân tách mã (code splitting), và xem xét việc tải chậm (lazy loading) các thành phần, đặc biệt là các modals lớn hoặc phức tạp. Kiểm thử ứng dụng của bạn trong các điều kiện mạng khác nhau bằng các công cụ như tab Mạng (Network) của Chrome DevTools.
Nhạy cảm văn hóa: Mặc dù các nguyên tắc của sự kiện nổi bọt là phổ quát, hãy chú ý đến các sắc thái văn hóa trong thiết kế giao diện người dùng. Tránh sử dụng hình ảnh hoặc các yếu tố thiết kế có thể gây khó chịu hoặc không phù hợp trong một số nền văn hóa. Tham khảo ý kiến của các chuyên gia quốc tế hóa và bản địa hóa khi thiết kế ứng dụng cho khán giả toàn cầu.
Kiểm thử trên nhiều thiết bị và trình duyệt: Đảm bảo ứng dụng của bạn được kiểm thử trên nhiều loại thiết bị (máy tính để bàn, máy tính bảng, điện thoại di động) và trình duyệt. Khả năng tương thích của trình duyệt có thể khác nhau, và bạn muốn đảm bảo một trải nghiệm nhất quán cho người dùng bất kể nền tảng của họ là gì. Sử dụng các công cụ như BrowserStack hoặc Sauce Labs để kiểm thử trên nhiều trình duyệt.

Gỡ lỗi các vấn đề thường gặp

Bạn có thể gặp một vài vấn đề phổ biến khi làm việc với React Portals và sự kiện nổi bọt. Dưới đây là một số mẹo gỡ lỗi:

Trình xử lý sự kiện không được kích hoạt: Kiểm tra kỹ xem bạn đã truyền đúng các trình xử lý sự kiện dưới dạng props cho thành phần Portal chưa. Đảm bảo rằng trình xử lý sự kiện được định nghĩa trong thành phần cha nơi bạn mong đợi nó được xử lý. Xác minh rằng thành phần của bạn thực sự đang render nút bấm với trình xử lý `onClick` chính xác. Đồng thời, xác minh rằng phần tử gốc của portal tồn tại trong DOM tại thời điểm thành phần của bạn cố gắng render portal.
Vấn đề lan truyền sự kiện: Nếu một sự kiện không nổi bọt như mong đợi, hãy xác minh rằng bạn không vô tình sử dụng `stopPropagation()` hoặc `preventDefault()` sai chỗ. Xem xét cẩn thận thứ tự các trình xử lý sự kiện được gọi, và đảm bảo rằng bạn đang quản lý đúng các giai đoạn bắt và nổi bọt sự kiện.
Quản lý tiêu điểm: Khi mở và đóng modals, việc quản lý tiêu điểm một cách chính xác là rất quan trọng. Khi modal mở, tiêu điểm lý tưởng nên chuyển đến nội dung của modal. Khi modal đóng, tiêu điểm nên quay trở lại phần tử đã kích hoạt modal. Việc quản lý tiêu điểm không chính xác có thể ảnh hưởng tiêu cực đến khả năng truy cập, và người dùng có thể thấy khó khăn khi tương tác với giao diện của bạn. Sử dụng hook `useRef` trong React để đặt tiêu điểm theo lập trình đến các phần tử mong muốn.
Vấn đề Z-Index: Portals thường yêu cầu CSS `z-index` để đảm bảo chúng render phía trên các nội dung khác. Hãy chắc chắn đặt các giá trị `z-index` phù hợp cho các vùng chứa modal của bạn và các yếu tố giao diện người dùng chồng chéo khác để đạt được lớp trực quan mong muốn. Sử dụng một giá trị cao, và tránh các giá trị xung đột. Xem xét việc sử dụng CSS reset và một cách tiếp cận định kiểu nhất quán trên toàn bộ ứng dụng của bạn để giảm thiểu các vấn đề về `z-index`.
Điểm nghẽn hiệu suất: Nếu modal hoặc portal của bạn gây ra các vấn đề về hiệu suất, hãy xác định độ phức tạp của việc render và các hoạt động có thể tốn kém. Cố gắng tối ưu hóa hiệu suất của các thành phần bên trong portal. Sử dụng React.memo và các kỹ thuật tối ưu hóa hiệu suất khác. Xem xét việc sử dụng memoization hoặc `useMemo` nếu bạn đang thực hiện các tính toán phức tạp trong các trình xử lý sự kiện của mình.

Kết luận

Sự kiện nổi bọt trong React Portal là một khái niệm quan trọng để xây dựng các giao diện người dùng phức tạp, năng động. Hiểu cách các sự kiện lan truyền qua các ranh giới DOM cho phép bạn tạo ra các thành phần thanh lịch và chức năng như modals, tooltips, và thông báo. Bằng cách xem xét cẩn thận các sắc thái của việc xử lý sự kiện và tuân theo các phương pháp hay nhất, bạn có thể xây dựng các ứng dụng React mạnh mẽ và có thể truy cập, mang lại trải nghiệm người dùng tuyệt vời, bất kể vị trí hay nền tảng của người dùng. Hãy tận dụng sức mạnh của portals để tạo ra các giao diện người dùng tinh vi! Hãy nhớ ưu tiên khả năng truy cập, kiểm thử kỹ lưỡng, và luôn xem xét các nhu cầu đa dạng của người dùng.